<template>
  <div class="pass">
    <!-- 通行证管理 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <div class="sousuo">
        <div>
          <!-- 一个输入框，两个按钮 -->
          <el-button type="info" class="getNoticeAdd" @click="getNoticeAdd"
            >新增公告</el-button
          >
          <el-button type="info" @click="dorefresh">刷新</el-button>
        </div>

        <div class="search">
          <!-- 一个输入框，两个按钮 -->
          <el-input v-model="searchById" placeholder="请输入公告ID" />
          <el-button type="primary" @click="getNoticeById">搜索</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="noticeList">
        <el-table-column prop="id" label="公告ID"></el-table-column>

        <el-table-column prop="time" label="发布时间"></el-table-column>
        <el-table-column prop="title" label="发布标题"></el-table-column>
        <el-table-column prop="message" label="发布内容"></el-table-column>
        <el-table-column prop="level" label="等级"></el-table-column>
        <el-table-column prop="num" label="被查看次数"></el-table-column>

        <el-table-column label="操作">
          <template v-slot="scope">
            <div class="operation">
              <!-- scope.row.time,scope.row.title,scope.row.message,scope.row.level,scope.row.num -->
              <el-button
                color="green"
                @click="
                  gotoupdate(
                    scope.row.id,
                    scope.row.time,
                    scope.row.title,
                    scope.row.message,
                    scope.row.level,
                    scope.row.num
                  )
                "
                >编辑</el-button
              >
              <el-button color="red" @click="deleteNotice(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="paging"
        background
        layout="prev, pager, next"
        :total="1000"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// getAllPassAPi获取所有通行证 发请求
import { ElMessage } from "element-plus";
import {
  getAllPassAPi,
  deletePassApi,
  changePassStatusApi,
  getUserPassApi,
} from "../api/index.js";
import {
  getAllNoticeAPi,
  deleteNoticeApi,
  getNoticeByIdApi,
} from "../api/index1.js";
export default {
  inject: ["refresh"],
  data() {
    return {
      passList: [],
      searchById: "",
      noticeList: [],
    };
  },
  methods: {
    //刷新的方法
    dorefresh() {
      this.refresh();
    },
    getNoticeAdd() {
      this.$router.push({
        path: "../views/noticeAdd", //要跳转的页面的路由
      });
    },
    // 1.获取通行证列表的方法
    getPassList() {
      getAllPassAPi().then((res) => {
        // console.log(res)
        this.passList = res.data.data;
        // console.log(this.passList)
      });
    },
    // 2.根据id删除通行证
    deletePass(id) {
      deletePassApi(id).then((res) => {
        console.log(res);
        // 1.刷新数据
        this.getPassList();
        // 2.提示用户删除成功
        if (res.code == 20000) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
        }
      });
    },
    // 3.改变通行证状态
    changeStatus(id, status) {
      console.log(id + status);

      let obj = {
        id: id,
        status: status,
      };
      changePassStatusApi(obj).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          this.getPassList();
          ElMessage({
            message: "更新成功",
            type: "success",
          });
        }
      });
    },
    // 4.搜索
    getNoticeById() {
      getNoticeByIdApi(this.searchById).then((res) => {
        console.log(res);
        this.noticeList = res.data;
        // console.log(this.noticeList)
      });
    },
    // 5.重置
    reset() {
      this.searchById = "";
      this.getPassList();
    },
    // 6.获取所有notice的方法
    getNoticeList() {
      getAllNoticeAPi().then((res) => {
        console.log(res);
        this.noticeList = res.data;
        // console.log(this.passList)
      });
    },
    // 7.根据id删除notice
    deleteNotice(id) {
      console.log(id);
      deleteNoticeApi(id).then((res) => {
        console.log(res);
        // 1.刷新数据
        this.getNoticeList();
        // 2.提示用户删除成功
        if (res.code == 20000) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
        }
      });
    },
    // 8、go to update      time,title,message,level,num
    gotoupdate(id, time, title, message, level, num) {
      // 3.跳转，隐式传递参数 只能用name
      this.$router.push({
        // path:'../views/noticeUpdate',
        name: "noticeUpdate",
        params: {
          id: id,
          time: time,
          title: title,
          message: message,
          level: level,
          num: num,
        },
      });
    },
  },
  created() {
    // this.getPassList();
    this.getNoticeList();
  },
};
</script>

<style lang="less" scoped>
.pass {
  .el-breadcrumb {
    margin-bottom: 30px;
  }
}
.search {
  width: 300px;
  display: flex;
  .el-input {
    margin-right: 30px;
  }
}
.operation {
  display: flex;
}

.paging {
  display: flex;
  justify-content: right;
}

.sousuo {
  display: flex;
  justify-content: space-between;
}
</style>